<script setup>
import {computed} from 'vue'
import UniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue'

const props = defineProps(['item', 'active'])
const userInfo = computed(() => props.item.user_id[0])
</script>

<template>
  <div class="chat-user-item" :class="{active}">
    <image :src="userInfo.avatar_src" class="avatar" mode="aspectFill"></image>

    <div class="right">
      <div class="top">
        <div class="name">{{ userInfo.nickname }}</div>
        <uni-dateformat :date="item.recent_time" class="time" format="h:m"/>
      </div>

      <div class="text">{{ item.recent_text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-user-item, .top {
  @include flex-box;
  align-items: center;
}

.chat-user-item {
  gap: $spacing-4;
  padding-right: $spacing-2;
  cursor: pointer;
  border-radius: $border-radius-2 0 0 $border-radius-2;

  &:hover {
    background: $light-bg;
  }
}

.active {
  position: relative;

  &::after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: $black;
  }
}

.avatar {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: $border-radius-2;
}

.right {
  @include flex-box(false, true);
  @include full-box;
  justify-content: space-between;

  .top {
    justify-content: space-between;
  }

  .name, .time {
    color: $black;
  }

  .time, .text {
    font-size: $font-size-5;
  }

  .text {
    @include rows-ellipsis(1);
    color: $black-2;
  }
}
</style>
